<template>
    <div class="home-layout">
        <aside class="sidebar">
            <my-el-card header="导航">
                <my-el-tree
                    :data="treeData"
                    :props="treeProps"
                    default-expand-all
                    highlight-current
                    @node-click="onNodeClick"
                />
            </my-el-card>
        </aside>
        <main class="content">
            <my-el-card :header="currentTitle">
                <component :is="activeComponent" />
            </my-el-card>
        </main>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'

const treeData = [
    { id: 'home', label: '组件演示页' },
    { id: 'element-css', label: 'CSS 专区' },
    { id: 'canvas', label: 'Canvas 专区' },
    { id: 'hooks', label: 'Hooks 专区' },
    { id: 'theme-test', label: '主题测试' },
    { id: 'debounce-throttle', label: '防抖/节流' },
    { id: 'crud-demo', label: '页面 CRUD' },
    { id: 'about', label: '关于' }
]

const treeProps = {
    children: 'children',
    label: 'label'
}

const activeKey = ref('home')

const titleMap = {
    home: '组件演示页',
    'element-css': 'CSS 专区',
    canvas: 'Canvas 专区',
    hooks: 'Hooks 专区',
    'theme-test': '主题测试',
    'debounce-throttle': '防抖/节流',
    'crud-demo': '页面 CRUD',
    about: '关于'
}

import ElementCss from './ElementCss.vue'
import Canves from './canves.vue'
import HooksDemo from './HooksDemo.vue'
import ThemeTest from './ThemeTest.vue'
import DebounceThrottle from './DebounceThrottle.vue'
import PageCrudDemo from './PageCrudDemo.vue'

const componentMap = {
    home: Home,
    'element-css': ElementCss,
    canvas: Canves,
    hooks: HooksDemo,
    'theme-test': ThemeTest,
    'debounce-throttle': DebounceThrottle,
    'crud-demo': PageCrudDemo,
    about: About
}

const currentTitle = computed(() => titleMap[activeKey.value] || '内容')
const activeComponent = computed(() => componentMap[activeKey.value] || Home)

function onNodeClick(node) {
    activeKey.value = node.id
}
</script>

<style scoped>
.home-layout {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 240px;
    padding: 12px;
    box-sizing: border-box;
    overflow-y: auto;
}

.content {
    flex: 1;
    padding: 12px;
    box-sizing: border-box;
    overflow: auto;
}
</style>